import { Button, Form, Input, Select, Table, TreeSelect, Modal } from 'antd';
import { HddOutlined } from '@ant-design/icons'
import React, { useEffect, useState, useRef } from 'react';
import Styles from "./../../assets/styles/shoptype.module.less"
import { findAllShop } from '../../apis/service'
import qs from "querystring"
import MyModal from '../../components/MyModal';


function ShopService() {

  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [data, setData] = useState([])
  const [totals, setTotals] = useState()

  useEffect(() => {
    fetchData()
    allGoods()
  }, [])

  //页面渲染
  const fetchData = async () => {
    const res = await findAllShop()
    setData(res.data.rows)
  }
  const allGoods = async (e) => {
    const res = await findAllShop()
    // console.log(res)
    setTotals(res.data.total)
    // setData(res.data.rows)
  }
  const onChangePag = async (e, h) => {
    // console.log(e, h);
    const pages = qs.stringify({ pageSize: h, pageNum: e })
    const res = await findAllShop(pages)
    setData(res.data.rows)

  }
  //搜索
  const onFinish = async (values) => {

    console.log(values)
    const h=qs.stringify(values)
    console.log(h)
    const res = await findAllShop(h)
    console.log(res)
    setData(res.data.rows)
  }

  //表格
  const columns = [

    {
      title: '用户名',
      dataIndex: 'shopName',
      key: 'shopName',
    },
    {
      title: '账户',
      dataIndex: 'account',
      key: 'account',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '电话',
      dataIndex: 'telephone',
      key: 'telephone',
    },
    {
      title: '身份证号',
      dataIndex: 'idcard',
      key: 'idcard',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (a) => <div onClick={() => showModal(a)}><HddOutlined color="#52c41a" /></div>,
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
  };

  //重置
  const clearForm = useRef()
  const resetting = () => {
    clearForm.current.resetFields()
  }
  //模态框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [addData,setAllData]=useState([])
  const showModal = (e) => {
    console.log(e.serviceinfoList)
    setAllData(e.serviceinfoList)
    setIsModalOpen(true);
  };
  const close=()=>{
    setIsModalOpen(false)
  }

  

  return (
    <div>
      <div className={Styles.headerOne}>
        <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish} ref={clearForm}>
          <Form.Item
            name="shopName"
            label="用户名:"
          >
            <Input placeholder="" />
          </Form.Item>
          <div className={Styles.findOne}>
            <Form.Item shouldUpdate>
              {() => (
                <Button type="primary" htmlType="submit" className={Styles.find}>
                  查询
                </Button>
              )}
            </Form.Item>
            <Button className={Styles.findTwo} onClick={resetting}>重置</Button>
          </div>

        </Form>
      </div>
      <div style={{ marginTop: "20px" }}>
        <Table
          columns={columns}
          rowSelection={{
            ...rowSelection,
            checkStrictly,
          }}
          dataSource={data}
          bordered
          rowKey="id"
          pagination={{
            total: totals,
            pageSize: 10,
            pageSizeOptions: [5, 10, 15],
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: onChangePag
          }}
          size="large"
          scroll={{
            x: 1200,
          }}
        />
      </div>


      {/* 模态框 */}
      <MyModal open={isModalOpen} close={close} allData={addData}></MyModal>

    </div>
  )
}

export default ShopService